<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3033678_tl6ywddpnjb.css">
    <script src="../js/vue.js"></script>
    <style>
        a{
            color: inherit;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- <a href="">
            <i class="iconfont icon-saoyisao"></i>
            扫一扫
        </a> -->
        <!-- 传入文本 -->
        <nav-link content="百度" url="https://www.baidu.com" :blank="true"></nav-link>
        <br>
        <!-- 传入html结构 => 虽然实现但是传html结构时比较麻烦 -->
        <nav-link :content="html" url="https://www.baidu.com" :blank="true"></nav-link>
    </div>
    
</body>
<script>
    let NavLink = {
        props:['content','url',"blank"],
        data(){
            return {}
        },
        template:`<a :href="url" :target="blank?'_blank':'_self'" v-html='content'></a>`
    }

    var vm = new Vue({
        el:"#app",
        data:{
            html:`<i class="iconfont icon-saoyisao"></i> 扫一扫`
        },
        components:{
            NavLink,
        }
    })

</script>
</html>